<vdr-page-block>
    <vdr-action-bar>
        <vdr-ab-left>
            <vdr-language-selector
                [availableLanguageCodes]="availableLanguages$ | async"
                [currentLanguageCode]="contentLanguage$ | async"
                (languageCodeChange)="setLanguage($event)"
            ></vdr-language-selector>
        </vdr-ab-left>
        <vdr-ab-right>
            <vdr-action-bar-items locationId="facet-list" />
            <a
                class="btn btn-primary"
                [routerLink]="['./create']"
                *vdrIfPermissions="['CreateCatalog', 'CreateFacet']"
            >
                <clr-icon shape="plus"></clr-icon>
                {{ 'catalog.create-new-facet' | translate }}
            </a>
            <vdr-action-bar-dropdown-menu locationId="facet-list" />
        </vdr-ab-right>
    </vdr-action-bar>
</vdr-page-block>
<vdr-data-table-2
    class="mt-2"
    [id]="dataTableListId"
    [items]="items$ | async"
    [itemsPerPage]="itemsPerPage$ | async"
    [totalItems]="totalItems$ | async"
    [currentPage]="currentPage$ | async"
    [filters]="filters"
    (pageChange)="setPageNumber($event)"
    (itemsPerPageChange)="setItemsPerPage($event)"
    (visibleColumnsChange)="setVisibleColumns($event)"
>
    <vdr-bulk-action-menu
        locationId="facet-list"
        [hostComponent]="this"
        [selectionManager]="selectionManager"
    ></vdr-bulk-action-menu>
    <vdr-dt2-search
        [searchTermControl]="searchTermControl"
        [searchTermPlaceholder]="'catalog.filter-by-name' | translate"
    ></vdr-dt2-search>
    <vdr-dt2-column [heading]="'common.id' | translate" id="id" [hiddenByDefault]="true" [sort]="sorts.get('id')">
        <ng-template let-facet="item">
            {{ facet.id }}
        </ng-template>
    </vdr-dt2-column>
    <vdr-dt2-column
        [heading]="'common.created-at' | translate" id="created-at"
        [hiddenByDefault]="true"
        [sort]="sorts.get('createdAt')"
    >
        <ng-template let-facet="item">
            {{ facet.createdAt | localeDate : 'short' }}
        </ng-template>
    </vdr-dt2-column>
    <vdr-dt2-column
        [heading]="'common.updated-at' | translate" id="updated-at"
        [hiddenByDefault]="true"
        [sort]="sorts.get('updatedAt')"
    >
        <ng-template let-facet="item">
            {{ facet.updatedAt | localeDate : 'short' }}
        </ng-template>
    </vdr-dt2-column>
    <vdr-dt2-column [heading]="'common.name' | translate" id="name" [optional]="false" [sort]="sorts.get('name')">
        <ng-template let-facet="item">
            <a class="button-ghost" [routerLink]="['./', facet.id]"
                ><span>{{ facet.name }}</span>
                <clr-icon shape="arrow right"></clr-icon>
            </a>
        </ng-template>
    </vdr-dt2-column>
    <vdr-dt2-column [heading]="'common.code' | translate" id="code">
        <ng-template let-facet="item">
            {{ facet.code }}
        </ng-template>
    </vdr-dt2-column>
    <vdr-dt2-column [heading]="'common.visibility' | translate" id="visibility">
        <ng-template let-facet="item">
            <vdr-chip *ngIf="facet.isPrivate" colorType="warning">{{
                'common.private' | translate
            }}</vdr-chip>
            <vdr-chip *ngIf="!facet.isPrivate" colorType="success">{{
                'common.public' | translate
            }}</vdr-chip>
        </ng-template>
    </vdr-dt2-column>
    <vdr-dt2-column [heading]="'catalog.values' | translate" id="values">
        <ng-template let-facet="item">
            <div class="facet-values-list">
                <vdr-facet-value-chip
                    *ngFor="let value of facet.valueList.items | slice : 0 : displayLimit[facet.id] || 3"
                    [facetValue]="value"
                    [removable]="false"
                    [displayFacetName]="false"
                ></vdr-facet-value-chip>
                <vdr-chip *ngIf="displayLimit[facet.id] < facet.valueList.totalItems && (displayLimit[facet.id] || 0) === facet.valueList.items.length">
                    ... + {{ facet.valueList.totalItems - facet.valueList.items.length }}
                </vdr-chip>
                <button
                    class="button-small"
                    *ngIf="facet.valueList.items.length > initialLimit"
                    (click)="toggleDisplayLimit(facet)"
                >
                    <ng-container *ngIf="(displayLimit[facet.id] || 0) < facet.valueList.items.length; else collapse">
                        <clr-icon shape="plus"></clr-icon>
                        {{ facet.valueList.totalItems - initialLimit }}
                    </ng-container>
                    <ng-template #collapse>
                        <clr-icon shape="minus"></clr-icon>
                    </ng-template>
                </button>
            </div>
        </ng-template>
    </vdr-dt2-column>
    <vdr-dt2-custom-field-column *ngFor="let customField of customFields" [customField]="customField" [sorts]="sorts" />
</vdr-data-table-2>
